﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Customize Comment</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        label {
            display:inline-block;
            width: 85px;
            text-align: right;
            margin-right: 12px;
        }

        input[type="checkbox"] + label {
            text-align: left;
        }

        input[type="text"] {
            width: 60px;
        }

        select {
            width: 64px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function initSpread(spread) {
            var spreadNS = GcSpread.Sheets;
            
            var sheet = spread.getSheet(0);
            var comment = new spreadNS.Comment();
            comment.text("new comment!");
            sheet.setComment(1, 1, comment);
            var activeComment = null;
            spread.bind(spreadNS.Events.SelectionChanged, function (e, info) {
                var sheetTmp = info.sheet;
                var row = sheetTmp.getActiveRowIndex();
                var col = sheetTmp.getActiveColumnIndex();
                var comment = sheetTmp.getComment(row, col);
                if (comment) {
                    $("#commentTip").text("Comment in Cell [ " + row + " : " + col + " ]");
                    activeComment = comment;
                } else {
                    $("#commentTip").text("No Comment Set");
                    activeComment = null;
                }
            });
            $("#setProperty").click(function () {
                if (activeComment) {
                    //1.
                    if ($("#txtText").val()) {
                        activeComment.text($("#txtText").val());
                    }

                    if ($("#txtLocation").val()) {
                        var pos = $("#txtLocation").val().split(",");
                        activeComment.location(new spreadNS.Point(parseInt(pos[0]), parseInt(pos[1])));
                    }
                    if ($("#txtWidth").val()) {
                        activeComment.width(parseInt($("#txtWidth").val()));
                    }
                    if ($("#txtHeight").val()) {
                        activeComment.height(parseInt($("#txtHeight").val()));
                    }

                    //2.
                    if ($("#txtFontFamily").val()) {
                        activeComment.fontFamily($("#txtFontFamily").val());
                    }
                    if ($("#txtFontSize").val()) {
                        activeComment.fontSize($("#txtFontSize").val() + "pt");
                    }
                    if ($("#txtFontWeight").val()) {
                        activeComment.fontWeight($("#txtFontWeight").val());
                    }

                    //3.
                    if ($("#txtBorderWidth").val()) {
                        activeComment.borderWidth(parseInt($("#txtBorderWidth").val()));
                    }

                    if ($("#txtBorderColor").val()) {
                        activeComment.borderColor($("#txtBorderColor").val());
                    }
                    if ($("#txtPadding").val()) {
                        var para = $("#txtPadding").val().split(",");
                        if (para.length === 1) {
                            activeComment.padding(new spreadNS.Padding(para[0]));
                        }
                        else {
                            activeComment.padding(new spreadNS.Padding(para[0], para[1], para[2], para[3]));
                        }
                    }

                    //4.
                    if ($("#txtForeColor").val()) {
                        activeComment.foreColor($("#txtForeColor").val());
                    }
                    if ($("#txtBackColor").val()) {
                        activeComment.backColor($("#txtBackColor").val());
                    }
                    if ($("#txtOpacity").val()) {
                        activeComment.opacity(parseFloat($("#txtOpacity").val()) / 100);
                    }

                    if ($("#txtzIndex").val()) {
                        activeComment.zIndex(parseInt($("#txtzIndex").val()));
                    }
                }
            })

            $("#chkLocked").change(function () {
                if (activeComment) {
                    activeComment.locked($(this).prop("checked"));
                }
            })

            $("#chkLockText").change(function () {
                if (activeComment) {
                    activeComment.lockText($(this).prop("checked"));
                }
            })

            $("#chkDynamicMove").change(function () {
                if (activeComment) {
                    activeComment.dynamicMove($(this).prop("checked"));
                }
            })

            $("#chkDynamicSize").change(function () {
                if (activeComment) {
                    activeComment.dynamicSize($(this).prop("checked"));
                }
            })

            $("#chkShowShadow").change(function () {
                if (activeComment) {
                    activeComment.showShadow($(this).prop("checked"));
                }
            })

            $("#comboBoxFontStyle").change(function () {
                if (activeComment) {
                    activeComment.fontStyle($(this).val());
                }
            })

            $("#comboBoxBorderStyle").change(function () {
                if (activeComment) {
                    activeComment.borderStyle($(this).val());
                }
            })

            $("#comboBoxTextDecoration").change(function () {
                if (activeComment) {
                    var textDecoration = $("#comboBoxTextDecoration").prop("value");
                    switch (textDecoration.toLowerCase()) {
                        case "underline":
                            activeComment.textDecoration(spreadNS.TextDecorationType.Underline);
                            break;
                        case "linethrough":
                            activeComment.textDecoration(spreadNS.TextDecorationType.LineThrough);
                            break;
                        case "overline":
                            activeComment.textDecoration(spreadNS.TextDecorationType.Overline);
                            break;
                        case "none":
                            activeComment.textDecoration(spreadNS.TextDecorationType.None);
                            break;
                    }
                }
            })

            $("#comboBoxHorizontal").change(function () {
                if (activeComment) {
                    var horizontal = $("#comboBoxHorizontal").prop("value");
                    switch (horizontal) {
                        case "left":
                            activeComment.horizontalAlign(spreadNS.HorizontalAlign.left);
                            break;
                        case "center":
                            activeComment.horizontalAlign(spreadNS.HorizontalAlign.center);
                            break;
                        case "right":
                            activeComment.horizontalAlign(spreadNS.HorizontalAlign.right);
                            break;
                        case "general":
                            activeComment.horizontalAlign(spreadNS.HorizontalAlign.left);
                            break;
                    }
                }
            })

            $("#comboBoxDisplayMode").change(function () {
                var displayMode = $(this).val();
                if (activeComment) {
                    activeComment.displayMode(spreadNS.DisplayMode[displayMode]);
                }
            })

            $("#comboBoxCommentState").change(function () {
                var commentState = $(this).val();

                if (activeComment) {
                    activeComment.commentState(spreadNS.CommentState[commentState]);
                }
            })

            $("#chkSheetProtect").change(function () {
                var spread = $("#ss").data("spread");
                var sheet = spread.getActiveSheet();
                sheet.setIsProtected($(this).prop("checked"));
            });
        };
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:310px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <label style="width:auto;">Select a cell with comment</label>
            <input type="button" id="setProperty" value="Update Properties" />
            <label id="commentTip"  style="width:auto;"></label>
        </div>
        <div class="option-row">
            <label>Text</label>
            <input id="txtText" type="text"  />
            <label>Location</label>
            <input id="txtLocation" type="text" />
            <label>Width</label>
            <input id="txtWidth" type="text" />
        </div>
        <div class="option-row">
            <label>Height</label>
            <input id="txtHeight" type="text" />
            <label>FontFamily</label>
            <input id="txtFontFamily" type="text" />
            <label>FontStyle</label>
            <select id="comboBoxFontStyle">
                <option value="normal">normal</option>
                <option value="italic">italic</option>
                <option value="oblique">oblique</option>
                <option value="inherit">inherit</option>
            </select>
        </div>
        <div class="option-row">
            <label>FontSize</label>
            <input id="txtFontSize" type="text" />
            <label>FontWeight</label>
            <input id="txtFontWeight" type="text" />
            <label>BorderWidth</label>
            <input id="txtBorderWidth" type="text" />
        </div>
        <div class="option-row">
            <label>BorderStyle</label>
            <select id="comboBoxBorderStyle">
                <option value="none">none</option>
                <option value="hidden">hidden</option>
                <option value="dotted">dotted</option>
                <option value="dashed">dashed</option>
                <option value="solid">solid</option>
                <option value="double">double</option>
                <option value="groove">groove</option>
                <option value="ridge">ridge</option>
                <option value="inset">inset</option>
                <option value="outset">outset</option>
            </select>
            <label>BorderColor</label>
            <input id="txtBorderColor" type="text" />
            <label>Padding</label>
            <input id="txtPadding" type="text" />
        </div>
        <div class="option-row">
            <label>TextDecoration</label>
            <select id="comboBoxTextDecoration">
                <option value="none">none</option>
                <option value="underline">underline</option>
                <option value="overline">overline</option>
                <option value="linethrough">linethrough</option>
            </select>
            <label>Opacity</label>
            <input id="txtOpacity" type="text" />%
        </div>
        <div class="option-row">
            <label>ForeColor</label>
            <input id="txtForeColor" type="text" />
            <label>BackColor</label>
            <input id="txtBackColor" type="text" />
            <label>zIndex</label>
            <input id="txtzIndex" type="text" />
        </div>
        <div class="option-row">
            <label>Horizontal</label>
            <select id="comboBoxHorizontal">
                <option value="left">left</option>
                <option value="center">center</option>
                <option value="right">right</option>
                <option value="general">general</option>
            </select>
                <label>CommentState</label>
            <select id="comboBoxCommentState">
                <option value="Active">Active</option>
                <option value="Edit">Edit</option>
                <option value="Normal">Normal</option>
            </select>
        </div>
        <div class="option-row">
            <label>DisplayMode</label>
            <select id="comboBoxDisplayMode" style="width:auto;">
                <option value="AlwaysShown">AlwaysShown</option>
                <option value="HoverShown">HoverShown</option>
            </select>
        </div>
        <div class="option-row">
            <input id="chkLocked" type="checkbox" checked="checked" />
            <label for="chkLocked">Locked</label>
            <input id="chkLockText" type="checkbox" checked="checked" />
            <label for="chkLockText">LockText</label>
            <input id="chkSheetProtect" type="checkbox" />
            <label for="chkSheetProtect" style="width:auto">Sheet IsProtected</label>
        </div>
        <div class="option-row">
            <input id="chkDynamicMove" type="checkbox" checked="checked" />
            <label for="chkDynamicMove">DynamicMove</label>
            <input id="chkDynamicSize" type="checkbox" checked="checked" />
            <label for="chkDynamicSize">DynamicSize</label>
            <input id="chkShowShadow" type="checkbox" />
            <label for="chkShowShadow">ShowShadow</label>
        </div>
    </div>
</div>
</body>
</html>
